<template class="tempStyle">
  <div class="bootDiv">
    <!-- 搜索输入框 -->
    <p class="y_c_input1">
      <input type="text" placeholder="输入医生姓名、科室" v-model="doctorKey">
      <i v-show="showDel" @click="delKey()">
        <svg class="icon" style="" viewBox="0 0 1024 1024"
          version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
          width="25" height="25" opacity="0.4"
        ><defs><style type="text/css"></style></defs><path d="M286.165333 798.165333L512 572.330667l225.834667 225.834666 60.330666-60.330666L572.330667 512l225.834666-225.834667-60.330666-60.330666L512 451.669333 286.165333 225.834667 225.834667 286.165333 451.669333 512l-225.834666 225.834667z" fill="" p-id="6379"></path></svg>
      </i>
    </p>
    <!-- 动态响应搜索列表 -->
    <scroller
      :onRefresh="refresh"
      :onInfinite="infinite"
    >
      <div class="listTop">
        <div v-for="(item,index) in list" :key="index" @click="openDoctor(item)" class="t_c_content">
          <div>
            <span v-show="showaveter == 'S'">
              <img :src="item.DOCTORIMAGEPATH | showHeadPic" height="50"/>
            </span>
            <span>
              <p>{{item.DOCTORNAME}}<a href="javascript:void(0);" class="docnamezc">{{item.DOCTORDEPARTMENT}}</a></p>
              <p>擅长：{{+item.DOCTORMAJOR || '各种疑难杂症'}}</p>
            </span>
            <span>
              <span>
                <i>
                  <svg class="icon" style="" viewBox="0 0 1024 1024"
                    version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
                    width="20" height="20" opacity="0.3"
                ><defs><style type="text/css"></style></defs><path d="M723.696401 533.102744c0.486519-0.973037 1.337926-1.824445 1.702815-2.797482 8.514075-17.757928 5.716593-39.651265-9.365483-53.881934L372.30835 151.307281c-18.730966-17.757928-48.28697-16.906521-66.044898 1.824445-17.757928 18.730966-16.906521 48.28697 1.824445 66.044898l308.452785 291.789524L309.304193 807.012709c-18.609336 17.879558-19.095855 47.435562-1.216296 66.044898 9.122224 9.487112 21.406818 14.352298 33.569783 14.352298 11.676446 0 23.352892-4.378667 32.353486-13.136002l340.563012-328.278418c0.608148-0.608148 0.851408-1.581185 1.581185-2.189334 0.486519-0.486519 0.973037-0.851408 1.581185-1.337926C720.53403 539.670745 721.871956 536.265115 723.696401 533.102744L723.696401 533.102744zM723.696401 533.102744"></path></svg>                </i>
              </span>
            </span>
          </div>
        </div>
      </div>
      <!--       </nuxt-link> -->
    </scroller>
    <navBot :isshowback="isshow"></navBot>
  </div>
</template>

<script>
import navBot from '~/components/common/navBot.vue';

const { config } = window;

export default {
  data() {
    return {
      LT: 'PAT',
      showaveter: `${config.SHOWAEVTER}`,
      showDel: false,

      list: [],
      ts: this.newStore(),
      tq: this.getData(),
      page: 0,
      doctorKey: '',
      root: `https://${sessionStorage.getItem('hospitalDomainname')}/doctor`,

      isshow: 1,
    };
  },
  created() {
    document.title = '医生列表';
    this.isshow = this.$route.query.isshow || 1;

    if (typeof WeixinJSBridge == "undefined"){
        if( document.addEventListener ){
            document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false);
        }else if (document.attachEvent){
            document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady); 
            document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady);
        }
    }else{
        this.onBridgeReady();
    }

  },
  mounted() {

  },
  components: {
    navBot,
  },
  methods: {
    onBridgeReady(){
      window.WeixinJSBridge.call('hideToolbar') // 通过下面这个API隐藏底部导航栏
      //window.WeixinJSBridge.call('showToolbar') // 通过下面这个API显示底部导航栏 
      window.WeixinJSBridge.call('hideOptionMenu') // 通过下面这个API隐藏右上角按钮
      //window.WeixinJSBridge.call('showOptionMenu') // 通过下面这个API显示右上角按钮
      //window.WeixinJSBridge.invoke('getNetworkType', {}, function (e) { alert(e.err_msg) })
      //alert("aaaaa");
    },
    openDoctor(item) {
      this.$router.push({
        name: 'doctor-doctorDetail',
        query: { jsonParams: JSON.stringify(item) },
      });
    },
    delKey() {
      this.doctorKey = '';
      this.showDel = false;
    },
    refresh(done) {
      this.page = 0;
      this.getdocdata(1, done);
    },
    infinite(done) {
      setTimeout(() => {
        this.page += 1;
        this.getdocdata(this.page, done);
      }, 500);
    },

    getdocdata(page, fn) {
      const that = this;

      if (page == 1) {
          this.list = [];
      }

      const DATA = {
        rowsperpage: '10',
        page: `${this.page}`,
        keywords: this.doctorKey,
      };

      this.tq.getDoctoList(DATA, this).then((ts) => {

        console.info(JSON.stringify(ts));
        
        //判断是否未登录
        if (ts.d.errCode && ts.d.errCode == '101') {
          this.$router.push('/');
          return;
        }

        if (ts.d.DATAOBJ.DATA.length < 1) {
          // this.list = [];
          this.page = 0;
          fn(true);
          return;
        } else if (fn) {
          fn();
        }
        if (page == 1) {
          this.list = ts.d.DATAOBJ.DATA;
        } else {
          this.list = this.list.concat(ts.d.DATAOBJ.DATA);
        }
      });
    },

  },
  watch: {
    doctorKey() {
      console.log(`-----length:${this.doctorKey.length}`);
      console.log(`-----content:${this.doctorKey}`);
      if (this.doctorKey.length > 0) {
        this.showDel = true;
      }
      if (this.doctorKey.length <= 0 || `${this.doctorKey}` == '') {
        this.showDel = false;
      }
      this.getdocdata(1);
    },
  },
  filters: {
    showHeadPic(value) {
      if (!value || value == '' || value == 'null' || value == undefined) return '../image/yisheng.png';/* '../../static/images/dochead.jpg' */
      return `https://${sessionStorage.getItem('hospitalDomainname')}/doctor${value}`;
    },
  },
};
</script>
<style scoped lang="stylus">
.tempStyle
  background-color: #f8f9fa;
  width: 100%;
  height: 100%;
.bootDiv
  background-color: #fff;
.t_c_content
  display flex
  justify-content space-between
  border-bottom 1px solid #f1f1f1
  margin 0rem
  padding-top .2rem
  background #fff
  span
    float left
    display inline-block
    &:first-child
      border-radius 50%
      height 3rem
      width 3rem
      line-height 4rem
      margin 0.5rem
      text-align center
      background #fff
      img
        vertical-align: inherit;
        border-radius 50%
        width 2.5rem
        height 2.5rem
    &:nth-child(2)
      margin 1rem 0
      width 68vw
      p
        height 0.5rem
        line-height 1.5rem
        font-size 0.8rem
        color #aaa
        &:first-child
          font-weight bold
          font-size 1rem
          color black
        &:last-child
          margin-top .6rem
          font-size 0.7rem
    &:last-child
      height 3rem
      text-align right
      vertical-align: middle
      width 3vw
      font-size 1rem
      color #aaa
      margin-top: .2rem

.docnamezc
  margin-left .3rem
  font-size 0.8rem
  color #aaa
.y_c_input1 input{
  /* position: fixed; */
  width: 96%;
  border: none;
  font-size: 0.9rem;
  font-family: "Microsoft Yahei";
  padding-right: 2rem;
  background: #fff; /* f8f9fa */
  border-radius: 0.6rem;
  text-indent: 0.3rem;
  outline:none;
  padding: 0.5rem 0;
  margin-bottom: 0.2rem;
  -webkit-box-shadow:0px 0px 4px #c8c8c8 ;    /* 阴影 */
  -moz-box-shadow:0px 0px 4px #c8c8c8 ;
  box-shadow:0px 0px 4px #c8c8c8 ;
}
.y_c_input1{
  position: fixed;
  width: 100%;
  margin: 0 auto;
  padding-top: .3rem;
  z-index: 10000;
  text-align: center;
  background: #fff;
  /* border-bottom: 1px solid #ccc; */
}
.y_c_input1 i{
  position: absolute;
  top: 0;
  right: 2%;
  z-index: 9999;
  font-size: 1.4rem;
  color:#666;
  display: inline-block;
  margin-top: .3rem;
}
.listTop{  //列表离TOP的距离
  margin-top: 2.5rem;
  background: #fff;
}
</style>

